<template>
  <div>
    <a-popover placement="bottom" trigger="click">
      <template slot="content">
        <div
          class="selectItem"
          v-for="(item, index) in list"
          :key="index"
          @click="handleSelect(item, index)"
        >
          <span>{{ item }}</span>
          <a-icon v-show="showChecked(item)" type="check" />
        </div>
      </template>
      <a-input style="width: 150px" v-model="value"></a-input>
    </a-popover>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      list: ['a', 'b', 'c', 'd', '1', '2', '3'],
      value: ''
    }
  },
  methods: {
    showChecked (item) {
      let arr = this.value.split(",")
      if (arr.includes('')) {
        arr.shift()
      }
      if (arr.includes(item)) {
        return true
      }
      return false
    },
    handleChange (value) {
      console.log(`selected ${value}`)
    },
    handleSelect (item, index) {
      let arr = this.value.split(",")
      if (arr.includes('')) {
        arr.shift()
      }
      if (arr.includes(item)) {
        let currentIndex = arr.findIndex((item1) => {
          return item1 === item
        })
        arr.splice(currentIndex, 1)
      } else {
        arr.push(item)
      }
      console.log(arr)
      if (arr.length === 1) {
        this.value = arr.join('')
      } else {
        this.value = arr.join(",")
      }
    }
  },
}
</script>

<style scoped lang="scss">
.selectItem {
  padding: 5px 0;
  cursor: pointer;
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>
